<div ng-if="!$ctrl.mixDatabaseDataValue.column.isSelect" class="mb-3 row">
    <div class="col-3">
        <h6 class="control-label m-0" ng-if="$ctrl.isShowTitle=='true'"
            ng-bind="$ctrl.mixDatabaseDataValue.column.title || $ctrl.mixDatabaseDataValue.column.name"></h6>
        <smal>({{$ctrl.mixDatabaseDataValue.dataType}})</smal>
    </div>
    <div ng-switch="$ctrl.mixDatabaseDataValue.dataType.toLowerCase()" class="col-9 pb-4">
        <div class="text-muted" ng-switch-default>
            <!--custom-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.mixDatabaseDataValue.stringValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted" ng-switch-when="datetime">
            <!--datetime-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.mixDatabaseDataValue.dataType)" type="datetime-local"
                ng-model="$ctrl.mixDatabaseDataValue.dateObj"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted" ng-switch-when="date">
            <!--date-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.mixDatabaseDataValue.dataType)" type="date"
                ng-model="$ctrl.mixDatabaseDataValue.dateObj"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted" ng-switch-when="time">
            <!--time-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.mixDatabaseDataValue.dataType)" type="time"
                ng-model="$ctrl.mixDatabaseDataValue.dateObj"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted" ng-switch-when="text">
            <!--Text-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.mixDatabaseDataValue.stringValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted" ng-switch-when="html">
            <!--Html-->
            <trumbowyg options="{}" ng-model="$ctrl.mixDatabaseDataValue.stringValue"></trumbowyg>

            <!-- <quill-editor
        content="$ctrl.mixDatabaseDataValue.stringValue"
      ></quill-editor> -->
        </div>
        <div class="text-muted" ng-switch-when="multilinetext">
            <!--TextArea-->
            <textarea class="form-control form-control-sm {{$ctrl.inputClass}}" rows="5"
                ng-model="$ctrl.mixDatabaseDataValue.stringValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}"></textarea>
        </div>
        <div class="text-muted" ng-switch-when="emailaddress">
            <!--Email-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="email"
                ng-model="$ctrl.mixDatabaseDataValue.stringValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted" ng-switch-when="password">
            <!--Password-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="password"
                ng-model="$ctrl.mixDatabaseDataValue.stringValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted" ng-switch-when="url">
            <!--Url-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.mixDatabaseDataValue.stringValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted" ng-switch-when="imageurl">
            <!--ImageUrl-->
            <input placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}"
                class="form-control form-control-sm {{$ctrl.inputClass}}" type="url"
                ng-model="$ctrl.mixDatabaseDataValue.stringValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted col-8 card p-0" ng-switch-when="upload">
            <!--upload-->
            <custom-image header="'Image'" type="'Posts'" folder="'Attributes'"
                src-url="$ctrl.mixDatabaseDataValue.stringValue" src="$ctrl.mixDatabaseDataValue.stringValue"
                w="$ctrl.mixDatabaseDataValue.column.columnConfigurations.upload.width"
                h="$ctrl.mixDatabaseDataValue.column.columnConfigurations.upload.height" auto="'true'">
            </custom-image>
        </div>
        <div class="text-muted" ng-switch-when="color">
            <!--Color-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="color"
                value="{{$ctrl.mixDatabaseDataValue.stringValue}}" ng-model="$ctrl.mixDatabaseDataValue.stringValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
        </div>
        <div class="text-muted" ng-switch-when="boolean">
            <!--Boolean-->
            <input class="{{$ctrl.inputClass}}" type="checkbox"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}"
                ng-change="$ctrl.updateStringValue($ctrl.mixDatabaseDataValue.dataType)"
                ng-model="$ctrl.mixDatabaseDataValue.booleanValue"
                ng-checked="$ctrl.mixDatabaseDataValue.booleanValue" />
        </div>
        <div class="text-muted" ng-switch-when="icon">
            <mix-select-icons prefix="'fab'" options="$ctrl.icons" data="$ctrl.mixDatabaseDataValue.stringValue">
            </mix-select-icons>
        </div>
        <div class="text-muted" ng-switch-when="videoyoutube">
            <youtube-editor code="$ctrl.mixDatabaseDataValue.stringValue"></youtube-editor>
        </div>
        <div class="text-muted" ng-switch-when="tuieditor">
            <tui-editor content="$ctrl.mixDatabaseDataValue.stringValue"></tui-editor>
        </div>
        <div class="text-muted" ng-switch-when="integer">
            <!-- Number -->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="number"
                ng-model="$ctrl.mixDatabaseDataValue.integerValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
            <label class="form-label" ng-bind="$ctrl.mixDatabaseDataValue.integerValue | currency:'':0"></label>
        </div>
        <div class="text-muted" ng-switch-when="double">
            <!-- Number -->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="number"
                ng-model="$ctrl.mixDatabaseDataValue.doubleValue"
                placeholder="{{$ctrl.mixDatabaseDataValue.column.title}}" />
            <label class="form-label" ng-bind="$ctrl.mixDatabaseDataValue.doubleValue | currency:''"></label>
        </div>
        <div ng-switch-when="currency">
            <!--Currency-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.type)" type="number" ng-model="$ctrl.doubleValue"
                placeholder="{{$ctrl.title}}" />
            <label class="form-label" ng-bind="$ctrl.doubleValue | currency:''"></label>
        </div>
        <div class="text-muted" ng-switch-when="qrcode">
            <!--Text-->
            <qr-code model="$ctrl.mixDatabaseDataValue.stringValue"></qr-code>
        </div>
        <div class="text-muted" ng-switch-when="reference">
            <!-- Referrence -->
            <!-- <a ng-if="$ctrl.parentId" href="/portal/mix-database-data/details?dataId=default&mixDatabaseId={{$ctrl.mixDatabaseDataValue.column.referenceId}}&parentType={{$ctrl.parentType}}&parentId={{$ctrl.parentId}}" 
                class="btn btn-sm btn-primary px-4 mt-3 ng-scope">
                <i class="fas fa-plus"></i> Add
            </a> -->
            <div class="alert alert-warning" role="alert" ng-if="!$ctrl.parentId">
                <i class="fas fa-exclamation-triangle me-3"></i> Please save the current
                item to initialization a parent ID before input it child's data!
            </div>
            <div class="row" ng-if="$ctrl.parentId">
                <div class="col-md-12">
                    <a href="/portal/mix-database-data/create?mixDatabaseId={{$ctrl.mixDatabaseDataValue.column.referenceId}}&dataId=default&parentId={{$ctrl.parentId}}&parentType={{$ctrl.parentType}}"
                        class="btn btn-sm btn-primary float-end px-4 me-2 text-white">
                        <i class="fas fa-plus"></i> Create data
                    </a>
                </div>
                <div class="col-md-12">
                    <mix-database-nav-values max-col="2" mix-database-id="$ctrl.mixDatabaseDataValue.column.referenceId"
                        parent-id="$ctrl.parentId" parent-type="$ctrl.parentType" on-update="$ctrl.updateRefData(data)"
                        on-delete="$ctrl.removeRefData(data)">
                    </mix-database-nav-values>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- TODO: Only allow stringValue -->
<div ng-if="$ctrl.mixDatabaseDataValue.column.isSelect" class="mb-3 row">
    <div class="col-3">
        <h6 class="form-label" ng-if="$ctrl.isShowTitle" ng-bind="$ctrl.mixDatabaseDataValue.column.title"></h6>
    </div>
    <div class="col-9">
        <select ng-if="$ctrl.mixDatabaseDataValue.dataType!='icon'" class="form-select form-control"
            ng-model="$ctrl.mixDatabaseDataValue.stringValue">
            <option ng-repeat="item in $ctrl.mixDatabaseDataValue.column.options track by $index" ng-value="item.value">
                {{item.value}}
            </option>
        </select>
    </div>
    <br />
</div>